<template>
	<view>
		<view class="list_container">
			<view class="row" v-for="i in rows">
				<view class="card1" @click="toSeller(Discover[i*2])">
					<image :src="Discover[i*2].logo" class="seller_logo"></image>
					<view class="seller_info">
						
						<view class="name_address">
							<view class="seller_name">
								<text>{{Discover[i*2].sellername}}</text>
							</view>
							<view class="seller_address">
								<text>{{Discover[i*2].address}}</text>
							</view>
						</view>
						
						<view class="star_cost">
							<view class="star">
								<text>{{Discover[i*2].star}}分</text>
							</view>
							<view class="cost">
								<text>配送费¥{{Discover[i*2].packCost}}</text>
							</view>
						</view>
						
						<view class="seller_phone">
							<text>电话：{{Discover[i*2].phone}}</text>
						</view>
						
					</view>
				</view>
				<view class="card2" v-if="i*2+1 < length">
					<image :src="Discover[i*2+1].logo" class="seller_logo"></image>
					<view class="seller_info">
						
						<view class="name_address">
							<view class="seller_name">
								<text>{{Discover[i*2+1].sellername}}</text>
							</view>
							<view class="seller_address">
								<text>{{Discover[i*2+1].address}}</text>
							</view>
						</view>
						
						<view class="star_cost">
							<view class="star">
								<text>{{Discover[i*2+1].star}}分</text>
							</view>
							<view class="cost">
								<text>配送费¥{{Discover[i*2+1].packCost}}</text>
							</view>
						</view>
						
						<view class="seller_phone">
							<text>电话：{{Discover[i*2+1].phone}}</text>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ip: "http://localhost:8080",
				Discover: [],
				rows: 0 ,//行数
				length: 0,//商家数量
			}
		},
		methods: {
			toSeller: function(Seller){
				uni.navigateTo({
					url: '../seller/seller'
				})
			},
			
			discover: function() {
				var that = this
				uni.request({
					url: this.ip + "/discover",
					success: function(data) {
						that.Discover = data.data.Discover
						that.length = that.Discover.length
						that.rows = that.length%2 + Math.floor(that.length/2)
					}
				})
			}
		},
		onLoad: function() {
			this.discover()
		},
		onPullDownRefresh:function(){
			this.discover()
		}
	}
</script>

<style>
	.seller_phone {
		margin-left: 15rpx;
		margin-top: 15rpx;
	}
	
	.star_cost {
		width: 300rpx;
		margin-left: 15rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		color: #808080;
	}
	
	.name_address {
		width: 300rpx;
		margin-left: 15rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-between;
		font-size: 36rpx;
	}
	
	.seller_logo {
		width: 300rpx;
		margin-left: 15rpx;
		height: 300rpx;
		border-radius: 1em;
	}
	
	.card2 {
		background-color: #FFFFFF;
		width: 330rpx;
		height: 500rpx;
		border-radius: 1em;
	}
	
	.card1 {
		background-color: #FFFFFF;
		width: 330rpx;
		height: 500rpx;
		margin-right: 30rpx;
		border-radius: 1em;
	}
	
	.row {
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;
	}
	
	.list_container {
		width: 750rpx;
		padding: 30rpx;
	}
	
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fafafa;
	}
	
	page {
		background-color: #fafafa;
	}
</style>
